<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>相册明细</title>

<style>
	body,div,input,label,h1,ul,li{margin: 0; padding: 0;}
	body, button, input, select, textarea {font: 12px "微软雅黑",arial,sans-serif;color:#2e2e2e;}
	table {border-collapse:collapse;border-spacing:0;}
	fieldset,img {border:0}
	address,caption,cite,code,dfn,strong,th,var{font-style:normal;font-weight:normal}
	ol,ul {list-style:none}
	caption,th {text-align:left}
	h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal}
	q:before,q:after {content:''}
	abbr,acronym { border:0}
	a{text-decoration:none;color:#999;outline:none;hide-focus:expression(this.hideFocus=true);}
	em{font-style:normal;}
	input,a,textarea{ outline:none;}
	a:hover{ text-decoration:underline;}
	html,body{width:100%;height:100%;}
	.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
	.clearfix{display:inline-block}* html .clearfix{height:1%}.clearfix{display:block}
	.fl{float:left;_display:inline}
	.p20{ padding: 20px;}.pt15{padding-top: 15px;}.pl20{padding-left: 20px;}.pb10{padding-bottom: 10px;}
	.m20{margin-left: 10px;}.ml10{margin-left:10px;}.mt20{margin-top:20px;}
	.pr{position: relative;}
	.h1-title{ font-size: 24px; line-height: 50px; font-weight: normal;}
	.sdklist-info li{ clear: both; overflow: hidden; padding:10px 0;}
	label.lab-left{ width: 100px; line-height: 26px; font-size: 12px;}
	input[type="text"]{ line-height: 26px; width: 260px; border: 1px solid #ccc;}
	textarea{ width: 560px; resize:none; height: 120px; line-height: 24px; overflow: auto; border: 1px solid #ccc;}
	input[type="checkbox"]+label{ position: relative; top: -2px; padding-left: 5px;}
	.save-btn{ background: #49c39d; border-radius: 5px; font-size: 18px; padding: 10px 60px; color: #FFF;}
	.save-btn:hover{ background: #6ce6c0; text-decoration: none;}
	select{ line-height: 26px; height: 26px; width: 120px;}
	.input-file{ position: absolute; left:0; left: 0px;opacity:0; filter:alpha(opacity=0); line-height: 28px; height:28px; width:230px; cursor:pointer;}
	.browse-btn{line-height: 28px;padding: 0 15px; background: #808080; color: #FFF;text-align: center; height:28px;}
	.upload-btn{ line-height: 28px;padding: 0 15px; background: #49c39d; color: #FFF;text-align: center; border:0; cursor:pointer;height:28px;}
	a:hover{text-decoration: none;}
	input[type="text"].textfield{width: 174px;}
	fieldset{border:1px solid #a6c9e2; margin-top:10px;}
	fieldset p{ text-indent:2em;line-height:22px; margin:0; padding:0;}
	.filedset-pad{padding:0 5px;}
	.img-con{text-align:center;}
	.img-con img{ padding-bottom:10px; max-width:450px !important; width:auto;}
	.btn-blue{line-height:28px;padding:0 15px; color:#FFF; background:#298BB8;}
	.high{ color:red; } 
	.select_border{height:27px;*background:#fff;background:#fff;*border:1px solid #FFFFFF;*padding:4px;*height:16px;}
	.container{*border:0;*position:relative;*height:18px;*overflow:hidden;}
	.select{border:1px solid #ccc;padding:1px 3px;font-size:12px;height:29px;margin:-1px; position: relative; *top: -9px;}
	
</style>

<script>

function syncPicture(){
	$.ajax({
          type: "post",
          url: "syncPictureStore",
          data: {
          	id : $("#id").val(),
          	menuId : $("#menuId").val()
          },
          dataType: "json",
          success: function(data){
          	 var result = eval(data);
			 if(result.resultCode == 'success'){
			 	$("#statue").val("同步队列中");
			 	$("#statue").addClass("high");
			 	$("#menuId").attr("disabled","true");
			 	// 隐藏同步按钮
			 	$("#sync").hide();
				Ext.example.msg('', '同步成功', '');
			 }else{
				Ext.example.msg('', '同步失败', '');
			 }
           }
      }); 
}	
	
</script>


</head>
<body>
<form id="update_info_form" method="post" class="form" action=""  enctype="multipart/form-data" target="apkIframe">
	<div class="filedset-pad">
		<input type="hidden"  id="id" name="id" value="${album.id}"/>
		
    	<fieldset>
    	<legend>相册明细</legend>
		<ul class="sdklist-info">
			<li>
				<label for="" class="fl lab-left">Id：</label>
				<input type="text" readonly value="${album.id}" style="width:260px;" />
			</li>  
			
			<li>
				<label for="" class="fl lab-left">状态：</label>
				<input id="statue" type="text" readonly class="fl" style="width:120px;" 
				<c:if test="${album.statue == 0}">
					value="未同步"
				</c:if>
				<c:if test="${album.statue == 1}">
					value="已同步" style="color:red" 
				</c:if>
				<c:if test="${album.statue == 2}">
					value="不可用"
				</c:if>
				<c:if test="${album.statue == 3}">
					value="同步队列中" style="color:red" 
				</c:if>
				/>
				<div class="select_border fl" style="width: 129px; *width:120px; margin:0 10px;">
                        <div class="container" style="*width:120px;">
                            <select id="menuId" name="" class="select" style="width: 130px; *width: 122px;" 
                            	<c:if test="${album.statue != 0}">
									disabled = "true" 
								</c:if>
                            >
                                <c:forEach items="${menuList}" var="menu">
									<c:if test="${album.menuId == menu.id}">
										<option value="${menu.id}" selected>${menu.menuName}</option>
									</c:if>
									<c:if test="${album.menuId != menu.id}">
										<option value="${menu.id}">${menu.menuName}</option>
									</c:if>
								</c:forEach>
                            <select>
                        </div>
                    </div>
				
				<c:if test="${album.statue == 0}">
					<a id="sync" href="javascript:;" class="btn-blue fl" onclick="syncPicture()">同步</a>
				</c:if>
			</li>
			
			<li>
				<label for="" class="fl lab-left">抓取时间：</label>
				<input type="text" readonly value="${album.createTime}" style="width:260px;" />
			</li>
		</ul>
 		</fieldset>
 		
 		<fieldset>
    			<legend>图片(<c:out value="${fn:length(album.picList)}"></c:out>)</legend>
    			<div class="img-con">
    				<c:forEach items="${album.picList}" var="pic">
						<img src="${pic.minImageUrl}"> <br />
					</c:forEach>
    			</div>
    	</fieldset>
    	
	</div>
</form>

</body>

</html>
